<template>
  <div class="generate_preview">
    <div class="preview_top">
      <div class="preview_title">合成预览</div>
      <div class="preview_desc">
        * 预览效果仅供参考，请以实际合成成片效果为准哦~
      </div>
    </div>
    <div class="estimate_num">
      <div class="num_label">预计可合成成片</div>
      <div class="num_value">
        <span v-if="isAgain">
          {{ numInfo.all }}
          <span class="fs-14" v-if="isAgain"
            >已合成({{ numInfo?.success }})</span
          >
        </span>
        <span v-else>{{ numInfo?.all }}</span>
      </div>
    </div>

    <div class="operate_con">
      <!-- <div class="operate_item">
        <div class="left_con">
          <div class="title">推荐成片：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="text" size="small">全部应用</a-button>
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con">
          <div class="title">差异度大成片：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="text" size="small">全部应用</a-button>
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con">
          <div class="title">完全不重复：</div>
          <div class="value">{{ videoNumber }}</div>
        </div>
        <div class="right_btn">
          <a-button type="text" size="small">全部应用</a-button>
        </div>
      </div> -->
      <div class="operate_item">
        <div class="left_con">
          <div class="title">选用数量：</div>
        </div>
        <div class="right_btn">
          <a-input-number
            style="width: 200px"
            placeholder="请输入"
            :max="edit_model == 5 && numInfo.un_synthesized > 1000 ? 1000 : numInfo.un_synthesized > 5000 ? 5000 : numInfo.un_synthesized"
            :min="1"
            :disabled="status === 'succeeded' || numInfo.un_synthesized === 0"
            v-model:value="selectNumber"
            @blur="handleBlur"
          />
        </div>
      </div>
      <div class="operate_item">
        <div class="left_con"></div>
        <div
          class="right_btn"
          style="width: 200px; margin-top: -10px; font-size: 12px"
        >
          <span style="color: #f0a121">*优先选用排序靠前的成片组合</span>
        </div>
      </div>
    </div>

    <div class="bottom_btn">
      <a-button
        type="primary"
        :disabled="status === 'succeeded' || numInfo.un_synthesized === 0"
        @click="handleComposition"
        :loading="submitLoading"
        >确定合成</a-button
      >
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, h, watch } from "vue";
import { useRouter,useRoute } from "vue-router";
import { Modal, message } from "ant-design-vue";
import request from "@/common/utils/request";

export default defineComponent({
  props: {
    dataList: {
      type: Array,
      default: [],
    },
    selectList: {
      type: Array,
      default: [],
    },
    recordId: {
      type: String,
      default: "",
    },
    isAgain: {
      type: Boolean,
      default: false,
    },
    numInfo: {
      type: Object,
      default: {},
    },
    status: {
      type: String,
      default: "",
    },
    edit_model: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      selectNumber: props.numInfo?.un_synthesized,
      submitLoading: false,
    });

    const postComposition = () => {
      state.submitLoading = true;
      let postUrl = "/user/shotstack/clip/samrt/synthesis";
      if (props.edit_model && props.edit_model == 5) {
        postUrl = "/user/shotstack/clip/image_text/synthesis";
      }
      return request
        .post("work_ai", postUrl, {
          responIds: props.selectList,
          record_id: props.recordId,
		  num: state.selectNumber
        })
        .then((res) => {
          state.submitLoading = false;
          if (res.result?.code == 1001) {
            message.warning(res.result?.msg);
            return;
          }
          router.push({ name: route.query.comeFrom, query: {
			  tab_key: props.edit_model
		  } });
        })
        .catch(() => {
          state.submitLoading = false;
        });
    };

    const handleComposition = () => {
      if (props.selectList?.length === 0) {
        message.warning("请选择需要合成的成片");
        return;
      }
      Modal.confirm({
        icon: null,
        title: "确定合成",
        okText: "确定",
        cancelText: "取消",
        content: h("div", {}, [
          h("span", "当前已选用"),
          h(
            "span",
            {
              style: "color:#4078f2;",
            },
            state.selectNumber
          ),
          h("span", " 个成片组合，确认合成后将扣除相应的 "),
          h(
            "span",
            {
              style: "color:#4078f2;",
            },
            state.selectNumber
          ),
          h("span", " 条剪辑条数，你确定合成吗？"),
        ]),
        onOk: () => {
          return postComposition();
        },
      });
    };

    const handleBlur = () => {
      context.emit(
        "blur",
        props.dataList
          ?.filter((i) => i.succeeded === 0)
          ?.filter((i, index) => index < state.selectNumber)
          .map((i) => i.id)
      );
    };

    watch(
      () => props.selectList?.length,
      (val) => {
		  if(val<=props.dataList
          ?.filter((i) => i.succeeded === 0)?.length){
			  state.selectNumber = val;
		  } else {
			  
		  }
      }
    );

    return {
      ...toRefs(state),
      handleBlur,
      handleComposition,
    };
  },
});
</script>

<style lang="less" scoped>
.generate_preview {
  .preview_top {
    padding: 20px;
    .preview_title {
      color: #1f2225;
      font-weight: 700;
      font-size: 16px;
    }
    .preview_desc {
      color: #9ea4aa;
      font-size: 11px;
      margin-top: 5px;
    }
  }
  .estimate_num {
    padding: 20px;
    background-color: #fafafa;
    .num_label {
      color: #9ea4aa;
      font-size: 12px;
    }
    .num_value {
      color: #1f2225;
      font-weight: 700;
      font-size: 19px;
      margin-top: 10px;
    }
  }
  .operate_con {
    padding: 0 20px;
    .operate_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
      .left_con {
        display: flex;
        align-items: center;
        .value {
          font-weight: 700;
        }
      }
    }
  }
  .bottom_btn {
    padding: 20px;
  }
}
</style>
